<template>
	<view class="date-container">
		<view class="title">
			出行日期
		</view>
		<view class="footer">
			<scroll-view class="viewScroll" :scroll-x="true" scroll-y="false">
				<view class="scroll-box">
					<view class="scrollItem" :class="[active === item.shop_cost_id? 'active' : '']"
						v-for="(item, index) in processedDateList" :key="index" @click="clickDate(item.shop_cost_id)">
						<view class="item-week">{{ item.week }}</view>
						<view class="item-date">{{ item.date }}</view>
						<view class="item-descr">{{ item.descr }}/人</view>
					</view>
				</view>
			</scroll-view>
			<view class="dingdan" @click="DatePickShow">
				<image src="../../../static/product-cwr/dingdan.png" mode=""></image>
				全部
			</view>
		</view>

	</view>
</template>

<script setup>
	import moment from 'moment';
	import {
		ref,
		onMounted,
		watch,
		nextTick
	} from 'vue';

	// 设置moment的locale为中文，并指定一周的第一天是周一
	moment.updateLocale('zh-cn', {
		week: {
			dow: 1 // 指定一周的第一天是周一
		}
	});
	moment.locale('zh-cn');

	const active = ref(0);

const getWeek = (date) => {
    const week = moment(date).isoWeekday(); // 使用 moment 的 isoWeekday
    switch (week) {
        case 1:
            return '周一';
        case 2:
            return '周二';
        case 3:
            return '周三';
        case 4:
            return '周四';
        case 5:
            return '周五';
        case 6:
            return '周六';
        case 7:
            return '周日';
        default:
            return '';
    }
};




	// Props
	// Props
	const props = defineProps({
		dateListInfo: {
			type: Array,
			default: () => []
		},
		dayId:{
			type:Number,
			default:0
		}
	});
	const emits = defineEmits(['DatePickShow','clickDate']);

	const DatePickShow = () => {
		emits('DatePickShow');
	};
	// 这是阉割后的日期列表的选择方法
	const clickDate = (id) => {
		// active.value = id;
		emits('clickDate',id)
	};
	// 新增的watch监听
	watch(() => props.dateListInfo, (newValue) => {
		if (newValue && newValue.length > 0) {
			const tempList = newValue.map((item, index) => {
				const dateObj = moment(item.today);
				return {
					shop_cost_id:item.shop_cost_id,
					week: getWeek(dateObj),
					date: dateObj.format("MM-DD"),
					descr: item.cost_final,
				};
			});
			processedDateList.value = tempList;
			console.log('Updated processedDateList:', processedDateList.value);
		}
	});
	watch(()=> props.dayId, (newValue) => {
		console.log('newValue',newValue);
		if(newValue) { 
			active.value = newValue
		}
	})
	// 处理传入的dateListInfo数据，提取需要展示的信息
	const processedDateList = ref([]);
	
	onMounted(() => {
	    const tempList = [];
	    try {
	        props.dateListInfo.forEach((item, index) => {
	            const dateObj = moment(item.today, "YYYY-MM-DD");
	            tempList.push({
					shop_cost_id:item.shop_cost_id,
	                week: getWeek(dateObj), // 使用修复后的 getWeek 函数
	                date: dateObj.format("MM-DD"),
	                descr: item.cost_final,
	            });
	        });
	        processedDateList.value = tempList;
	        console.log('processedDateList.value ', processedDateList.value);
	    } catch (error) {
	        console.error('在处理dateListInfo数据时出错：', error);
	    }
	});

</script>

<style scoped>
	.date-container {
		font-family: "仓耳渔阳体 W05";
		padding: 10rpx 20rpx;
		
	}

	.date-container.title {
		font-size: 34rpx;
	}

	.viewScroll {
		padding: 20rpx 20rpx;
		width: 586rpx;
		box-sizing: border-box;
	}

	.scroll-box {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		padding-bottom: 20rpx;
	}

	.active {
		background-color: #f2f5fe;
		border: 4rpx solid #044bad;
		color: #044bad;
	}

	.scrollItem {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.item-week {
		font-size: 20rpx;
	}

	.item-date {
		font-size: 26rpx;
		font-weight: bold;
	}

	.item-descr {
		font-size: 20rpx;
	}

	.dingdan {
		padding: 28rpx 20rpx 28rpx 20rpx;
		font-size: 24rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 22rpx;
		transition: 0.4s;
		border-radius: 10rpx;
	}

	.dingdan image {
		width: 35rpx;
		height: 35rpx;
	}

	.dingdan:active {
		background-color: #e0e0e0;
	}

	.footer {
		display: flex;
		align-items: center;
	}
</style>